<template>
  <div id="app" class="material-in">
    <!-- 头部导航 -->
    <van-nav-bar title="原料入库" left-text="返回" left-arrow @click-left="comeBack" style="color: #36d04b">
      <template #right>
<!--        <span @click="scanFn"><van-icon name="plus" size="20" /></span>-->
        <van-popover placement="bottom" v-model="showOptBtn" trigger="click" :actions="optBtn" @select="(action, index) => selectOptBtnFn(action,index)" get-container=".app">
          <template #reference>
            <van-icon name="more-o" size="20" @click="showOptBtn = true"></van-icon>
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <!-- 批次信息 -->
    <div style="padding: 0vh 2vw;" class="material-batch-info">
      <van-search :readonly="batchInfo.lockFlag" v-model="batchInfo.materialName" left-icon="" label="原料名称:" @input="clearMaterialFn" @search="filterMaterialFn"></van-search>
      <van-row type="flex">
        <van-col span="14">
          <van-search :readonly="batchInfo.lockFlag" v-model="batchInfo.lotNo" left-icon="" label="批次:" @input="clearBatchFn" @click="() => filterMaterialBatchFn()" @search="filterMaterialBatchFn">
            <template #right-icon>
              <van-button :disabled="batchInfo.lockFlag" type="primary" style="top: -1vh" size="small" @click.stop="addMaterialBatchFn">新增</van-button>
            </template>
          </van-search>
        </van-col>
        <van-col span="10">
          <van-search :readonly="true" v-model="batchInfo.area" left-icon="" label="区域:" @click="filterMaterialArea"></van-search>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="10">
          <van-field label-width="10vw" label-align="right" :readonly="true" v-model="batchInfo.weight" left-icon="" label="净重:"></van-field>
        </van-col>
        <van-col span="7">
          <van-field label-width="10vw" label-align="right" :readonly="true" v-model="batchInfo.packNum" left-icon="" label="包数:"></van-field>
        </van-col>
        <van-col span="7">
          <van-field label-width="10vw" label-align="right" :readonly="batchInfo.lockFlag" v-model="batchInfo.actualMoisture" left-icon="" label="回潮:"></van-field>
        </van-col>
      </van-row>
    </div>

    <!-- 分割线 -->
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 2vw' }">包详情</van-divider>

    <!-- 原料包列表 -->
    <better-scroll class="body-scroll" :data="packageData" style="height: 68vh;" :total-page="totalPage" :pulldown="true" :pullup="true" @pullup="loadNextPageFn" @pulldown="() => loadMaterialPackageByBatchDataFn(1)">
      <van-swipe-cell v-if="row.optFlag != 1" v-show="packageData.length > 0" v-for="(row, rIndex) in packageData" style="padding-bottom: 0.5rem">
        <template #default>
          <div class="data-card">
            <van-row>
              <van-col span="10">
                <van-field :readonly="true" colon label-width="6vw" label="ID" v-model="row.id" label-align="right">
                </van-field>
              </van-col>
              <van-col span="7">
                <van-field :readonly="row.id > 0" clearable colon label-width="11vw" label="净重" v-model="row.netWeight" label-align="right">
                </van-field>
              </van-col>
              <van-col span="7">
                <van-field :readonly="row.id > 0" clearable colon label-width="12vw" label="标重" v-model="row.weight" label-align="right"></van-field>
              </van-col>
            </van-row>
          </div>
        </template>
        <template #right>
          <div style="display: flex; flex-flow: column; padding-right: 2vw;">
            <van-button square text="删除" type="danger" @click="delPackageDataFn(row, rIndex)" />
          </div>
        </template>
      </van-swipe-cell>
      <van-empty  v-show="packageData.length == 0" image="https://img01.yzcdn.cn/vant/custom-empty-image.png" description="暂无数据" ></van-empty>
    </better-scroll>

    <!-- 底部按钮 -->
    <div style="display: flex;justify-content: center;align-items: center; padding: 1vh 0vw;">
      <van-button type="danger" @click="initFn">重置</van-button>
      <van-button type="primary" style="margin-left: 10vw;" @click="addPackFn">继续添加包</van-button>
      <van-button type="info" style="margin-left: 10vw;" @click="confirmPackInFn">入库完成</van-button>
    </div>

    <!-- 原料弹出面板 -->
    <van-action-sheet :title="filterPop.title" get-container=".material-in" v-model="filterPop.showFilterPop" :actions="filterPop.filterData" @select="selectFilterFn" />
  </div>
</template>

<script>
import {comeBack, getFloat} from "@/utils";
import {
  addMaterialPack,
  confirmPackIn,
  delMaterialPackage,
  filterMaterial,
  filterMaterialBatch,
  loadMaterialPackageByBatchData
} from "@/api/material";
import {SPLIT_XHX, SPLIT_YKH, SPLIT_ZKH} from "@/api/enum";
import {getByType} from "@/api/yarn";
import {addMaterialBatch} from "@/api/feed";

export default {
  name: "materialIn",
  data() {
    return {
      /* 导航右侧菜单 */
      showOptBtn: false,
      optBtn: [{
        text: "扫批次码",
        icon: "scan",
        className: "opt-btn-cls",
      }, {
        text: "新增批次",
        icon: "add-o",
        className: "opt-btn-cls",
      }],

      /* 查询相关 */
      queryParam: {
        keyLike: "",
        pageNum: 1,
        pageSize: 10,
        sendOutId: ""
      },

      /* 批次信息 */
      batchInfo: {
        lockFlag: false,
        materialId: 0,
        materialName: "",
        batchId: 0,
        lotNo: "",
        actualMoisture: "",
        area: "",
        weight: "",
        netWeight: "",
        packNum: "",
      },

      /* 包信息 */
      totalPage: 0,
      packageData: [],

      /* 弹出面板 */
      filterPop: {
        optFlag: 0,
        title: "",
        showFilterPop: false,
        filterData: [],
      }
    }
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    comeBack,

    /* 初始化 */
    initFn() {
      const that = this;
      that.batchInfo.lockFlag = false;
      that.batchInfo.materialId = 0;
      that.batchInfo.materialName = "";
      that.batchInfo.batchId = 0;
      that.batchInfo.lotNo = "";
      that.batchInfo.stdMoisture = "";
      that.batchInfo.actualMoisture = "";
      that.batchInfo.area = "";
      that.batchInfo.weight = "";
      that.batchInfo.netWeight = "";
      that.batchInfo.packNum = "";
      that.totalPage = 0;
      that.packageData.splice(0, that.packageData.length);
    },

    /* 增加批次 */
    addMaterialBatchFn() {
      const that = this;
      if(that.batchInfo.lockFlag) {
        return;
      }
      addMaterialBatch({
        materialId: that.batchInfo.materialId,
        lotNo: that.batchInfo.lotNo
      }, data => {
        that.batchInfo.batchId = data;
        that.$toast.success("批次添加成功");
      });
    },

    /* 选择按钮 */
    selectOptBtnFn(action, index) {
      const that = this;
      if(index == 0) {
        that.scanFn();
      } else if(index == 1) {
      }
    },

    /* 增加包 */
    addPackFn() {
      const that = this;
      //上一个存库 并打印
      if(that.packageData.length > 0 && that.packageData[0].id == 0) {
        addMaterialPack(that.packageData[0], data => {
          console.log(data);
          that.packageData[0].id = data;    //赋值ID
          that.packageData[0].status = 1;   //状态为已打包
          //打印

          that.addPackSubFn();
        });
      } else {
        that.addPackSubFn();
      }
    },
    addPackSubFn() {
      const that = this;
      if(that.batchInfo.materialId == 0) {
        that.$toast.fail("请先选择原料信息");
        return;
      }
      if(that.batchInfo.batchId == 0) {
        that.$toast.fail("请先编辑批次信息");
        return;
      }
      if(that.batchInfo.actualMoisture == "") {
        that.$toast.fail("请先输入实际回潮值");
        return;
      }
      if(that.batchInfo.area == "") {
        that.$toast.fail("请选择区域");
        return;
      }

      //计算
      that.calBatchFn();

      that.packageData.splice(0, 0, {
        id: 0,
        batchId: that.batchInfo.batchId,
        optFlag: 2,   //0-初始化; 1-删除; 2-新增
        netWeight: "",
        weight: "",
        area: that.batchInfo.area,
        actualMoisture: that.batchInfo.actualMoisture,
        stdMoisture: that.batchInfo.stdMoisture,
      });
      that.batchInfo.lockFlag = true;
    },

    /* 删除 */
    delPackageDataFn(pack, index) {
      const that = this;
      if(pack.id > 0 && pack.optFlag == 0) {
        pack.optFlag = 1;
        that.calBatchFn();
      } else if(pack.id > 0 && pack.optFlag == 2) {
        delMaterialPackage({packId: pack.id}, () => {
          that.packageData.splice(index, 1);
          that.calBatchFn();
        });
      } else if(pack.id == 0) {
        that.packageData.splice(index, 1);
        that.calBatchFn();
      }
    },

    /* 计算 */
    calBatchFn() {
      const that = this;
      let packs = that.packageData.filter(pack => pack.optFlag != 1 && pack.id > 0);
      if(packs.length == 1) {
        that.batchInfo.weight = that.packageData[0].weight;
        that.batchInfo.netWeight = that.packageData[0].netWeight;
        that.batchInfo.packNum = 1;
      } else if(packs.length > 1) {
        that.batchInfo.weight = getFloat(Math.ceil(that.packageData.map(pack => Number(pack.weight)).reduce((a,b) => Number(a) + Number(b))), 1);
        that.batchInfo.netWeight = getFloat(Math.ceil(that.packageData.map(pack => Number(pack.netWeight)).reduce((a,b) => Number(a) + Number(b))), 1);
        that.batchInfo.packNum = packs.length;
      } else {
        that.batchInfo.weight = 0;
        that.batchInfo.netWeight = 0;
        that.batchInfo.packNum = 0;
      }
    },

    /* 筛选选择 */
    selectFilterFn(action) {
      const that = this;
      if(that.filterPop.optFlag == 1) {
        that.selectMaterialFn(action);
      } else if(that.filterPop.optFlag == 2) {
        that.selectMaterialBatchFn(action);
      } else if(that.filterPop.optFlag == 3) {
        that.selectMaterialAreaFn(action);
      }
    },

    /* 原料筛选 */
    filterMaterialFn(query) {
      const that = this;
      if(that.batchInfo.lockFlag) {
        return;
      }
      that.filterPop.optFlag = 1;
      that.filterPop.title = "原料筛选";
      that.filterPop.filterData.splice(0, that.filterPop.filterData.length);
      filterMaterial({
        keyLike: query,
        type: 1
      }, data => {
        data.forEach(row => {
          that.filterPop.filterData.push({
            name: row.name + SPLIT_XHX + row.factory + SPLIT_XHX + row.color + SPLIT_XHX + row.standard + row.type + SPLIT_XHX + row.subType,
            item: row,
            className: "pop-item-border"
          });
        });
        that.filterPop.showFilterPop = true;
      });
    },
    /* 选择原料 */
    selectMaterialFn(action) {
      const that = this;
      that.filterPop.showFilterPop = false;
      that.batchInfo.materialId = action.item.id;
      that.batchInfo.materialName = action.item.name;
      that.batchInfo.stdMoisture = action.item.stdMoistureRegain;
    },

    /* 批次筛选 */
    filterMaterialBatchFn(query) {
      const that = this;
      if(that.batchInfo.lockFlag) {
        return;
      }
      if(that.batchInfo.materialId == 0) {
        that.$toast.fail("请先选择原料")
        return;
      }
      that.filterPop.optFlag = 2;
      that.filterPop.title = "批次筛选";
      that.filterPop.filterData.splice(0, that.filterPop.filterData.length);
      filterMaterialBatch({
        materialId: that.batchInfo.materialId,
        lotNo: query
      }, data => {
        data.forEach(row => {
          that.filterPop.filterData.push({
            name: row.lotNo + SPLIT_ZKH + "库存:" + row.weight + SPLIT_YKH,
            item: row,
            className: "pop-item-border"
          });
        });
        that.filterPop.showFilterPop = true;
      });
    },
    /* 选择批次 */
    selectMaterialBatchFn(action) {
      const that = this;
      that.filterPop.showFilterPop = false;
      that.batchInfo.batchId = action.item.id;
      that.batchInfo.lotNo = action.item.lotNo;
      //加载数据
      that.loadMaterialPackageByBatchDataFn(1);
    },

    /* 筛选区域 */
    filterMaterialArea() {
      const that = this;
      if(that.batchInfo.lockFlag) {
        return;
      }
      that.filterPop.optFlag = 3;
      that.filterPop.title = "区域选择";
      that.filterPop.filterData.splice(0, that.filterPop.filterData.length);
      getByType({
        type: 22,
        pageSize: 100
      }, data => {
        data.list.forEach(row => {
          that.filterPop.filterData.push({
            name: row.propertyValue,
            className: "pop-item-border"
          });
          that.filterPop.showFilterPop = true;
        });
      })
    },
    /* 选择区域 */
    selectMaterialAreaFn(action) {
      const that = this;
      that.filterPop.showFilterPop = false;
      that.batchInfo.area = action.name;
      //加载数据
      that.loadMaterialPackageByBatchDataFn(1);
    },

    /* 清空信息 */
    clearMaterialFn() {
      const that = this;
      that.batchInfo.materialId = 0;
      that.batchInfo.lotNo = "";
      that.clearBatchFn();
    },
    clearBatchFn() {
      const that = this;
      that.batchInfo.batchId = 0;
      that.batchInfo.actualMoisture = "";
    },

    /* 加载原料包 */
    loadMaterialPackageByBatchDataFn(pageNum) {
      const that = this;
      if(pageNum == 1) {
        that.queryParam.pageNum = 1;
        that.packageData.splice(0, that.packageData.length);
      }
      loadMaterialPackageByBatchData({
        batchId: that.batchInfo.batchId,
        area: that.batchInfo.area
      }, data => {
        that.totalPage = data.totalPage;
        data.list.forEach(row => {
          row.optFlag = 0;
          that.packageData.push(row);
        });
        //批次值
        that.batchInfo.lockFlag = true;
        that.batchInfo.area = that.packageData[0].area;
        that.batchInfo.actualMoisture = that.packageData[0].actualMoisture;

        //计算
        that.calBatchFn();
      });
    },

    /* 加载下一页 */
    loadNextPageFn() {
      let that = this;
      that.queryParam.pageNum++;
      that.loadMaterialPackageByBatchDataFn();
    },

    /* 确认完成 */
    confirmPackInFn() {
      const that = this;
      console.log(that.packageData);
      confirmPackIn({
        batchId: that.batchInfo.batchId,
        area: that.batchInfo.area,
        actualMoisture: that.batchInfo.actualMoisture,
        packs: that.packageData.filter(pack => pack.id > 0),
      }, data => {
        that.loadMaterialPackageByBatchDataFn(1);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.material-in {
  ::v-deep .opt-btn-cls {
    width: 15vw;
  }
  ::v-deep .van-search {
    z-index: 1;
    padding: 0.5vh 0.5vw;
    .van-search__content {
      padding-left: 0vw;
    }
    .van-field__right-icon {
      height: 2vh;
    }
  }
  ::v-deep .van-divider {
    margin: 0px;
  }

  .material-batch-info {
    ::v-deep .van-cell {
      padding: 0.5vh 0.5vw;
    }
  }

  .body-scroll {
    overflow: hidden;
    .van-swipe-cell__right {
      display: flex;
      flex-flow: column;
    }
    .data-card {
      width: 96vw;
      margin-left: 2vw;
      background-color: white;
      margin-top: 0.5rem;
      box-shadow: 0.3rem 0.5rem 0.3rem #888888;
      display: flex;
      flex-flow: column;
      div {
        display: flex;
        span {
          line-height: 1rem;
        }
        ::v-deep .van-cell {
          padding: 1vh 1.5vw;
        }
        ::v-deep .van-field__label {
          font-size: 1.1rem;
          color: #671c1c;
          margin-right: 0;
        }
        ::v-deep .van-field__control {
          font-size: 1.1rem;
          color: #671c1c;
          border-bottom: 1px solid #e6a23c;
        }

      }
    }
  }

  ::v-deep .pop-item-border {
    padding: 1vh 2vw;
    border-bottom: 1px solid #1989fa;
  }
}
</style>